I will be explaining at a high level how to initialize a React frontend based project with a Strapi backend (with optional cloud PostgreSQL via neon.tech and Cloudinary for image hosting). You may want to achieve something similar to this if you want to build a site for a client and allow them to add their own content via Strapi.

React frontend

Initialize a create-react-app project after CDing to a folder of your choice:

npx create-react-app my-app

cd into that new project and run the React server locally:

cd my-app
npm start

Notes on deploying React to Cloudflare:

• Domain can be registered on Cloudflare
• Build command: npm run build
• If you are using a monorepo, ensure root directory is set to directory of your react app.
• Don’t be afraid if your project doesn’t deploy first try. Cloudflare seems to be integrated with something strict that your local project may not catch (e.g. failing build due to == instead of === somewhere in your project)

Strapi backend:

Initialize a Strapi project after CDing to a folder of your choice:

npx create-strapi-app@latest my-strapi-project --quickstart

Then, create admin account and get started in Strapi.

Notes on Strapi

• Default 1337 port on localhost can be changed in .env file under PORT. Run npm run build then npm run develop afterwards to refresh the server.
• Though outdated using Strapi 3, this Strapi Crash Course by Net Ninja is good info for setting up Strapi in terms of permissions and calling the Strapi API via GraphQL. Check comments for Strapi 4 queries and code.
• GraphQL queries in Strapi currently default to pagination of 10. If you're seeing only 10 of something, change pagination of that item in your query. For example:
...
img(pagination: { limit: 100 })
...

Deploying Strapi to Render

• I recommend doing this sooner rather than later. If you’re using the free version of Render, then SQLite isn’t going to cut it due to Strapi utilizing that on the backend by default, and Render essentially killing SQLite and anything else on disk after some inactivity (if you pay for any tier on Render the site will remain up and not have to cold start and you can use SQLite just fine).
• This is about as straightforward as deploying a Javascript site to Cloudflare.
• If using free tier of Render, you will have to deploy databases to something cloud based/persistent instead.
• This Strapi/Gatsbi tutorial from Learning with Gideon details deploying Strapi to Render (#6), then migrating SQLite databases to Neon.tech PostgreSQL databases (#7).

Image hosting via Cloudinary

• Use a tutorial like this or this to set up Cloudinary with Strapi. Essentially images all likely need to be hosted on an image hosting service rather than directly on Render due to bandwidth and usage requirements.
• Image sizing when uploading to Cloudinary can be defined in plugins.js in your Strapi folder. Here is mine:

  module.exports = ({ env }) => ({
                  upload: {
                    config: {
                      provider: "cloudinary",
                      providerOptions: {
                        cloud_name: env("CLOUDINARY_NAME"),
                        api_key: env("CLOUDINARY_KEY"),
                        api_secret: env("CLOUDINARY_SECRET"),
                      },
                      actionOptions: {
                        upload: {},
                        uploadStream: {},
                        delete: {},
                      },
                    },
                    images: {
                      formats: {
                        small: { width: 500, height: 500 },
                        medium: { width: 1000, height: 1000 },
                      },
                    },
                  },
                });
                

• I have run into issues with Cloudinary not uploading all of my defined image formats. This can break code if you have statically defined specific sizes for an img element. Be sure to add some fail safes for rendering different image sizes if one may not exist at some point in time if users will be uploading images to Strapi post deployment.